<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      function mapObservable(observable, { next }) {
        return new Observable(observer => {
          const subscription = observable.subscribe({
            complete: observer.complete.bind(observer),
            error: observer.error.bind(observable),
            next: value => observer.next(next(value))
          });

          return subscription.unsubscribe.bind(subscription);
        });
      }

      function createDirectLineForTest(options) {
        const workingDirectLine = WebChat.createDirectLine(options);

        return {
          ...workingDirectLine,
          activity$: mapObservable(workingDirectLine.activity$, {
            next: value => ({
              ...value,

              // Substract 3 days from the timestamp
              timestamp: new Date(new Date(value.timestamp).getTime() - 86400000 * 3).toISOString()
            })
          }),
          postActivity: workingDirectLine.postActivity.bind(workingDirectLine)
        };
      }

      run(async function () {
        WebChat.renderWebChat(
          {
            directLine: createDirectLineForTest({ token: await testHelpers.token.fetchDirectLineToken() }),
            store: testHelpers.createStore(),
            styleOptions: {
              sendTimeout: 5000
            }
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();
        await pageObjects.sendMessageViaSendBox('echo Hello, World!', { waitForSend: false });
      });
    </script>
  </body>
</html>
